// person容器
import React, { Component } from 'react'
import { connect } from 'react-redux'
import {createPersonAction} from '../../redux/actions/person'
import {nanoid}from 'nanoid'
  
class PersonUI extends Component {
    addPerson=()=>{
        const name=this.nameRef.value
        const age=this.ageRef.value
        const obj={name,age,id:nanoid()}
        this.props.addPer(obj)
    }
    render() {
        return (
            <div>
                <h3>person</h3>
                {this.props.per.map(item=>{
                    return <div key={item.id} {...item}>{item.name}and{item.age}</div>;
                })}
            <input ref={c=>this.ageRef=c} placeholder="年龄"/>
            <input ref={c=>this.nameRef=c} placeholder="姓名"/>
            <button onClick={this.addPerson}>添加一个人</button>
            </div>
        )
    }
}
export default connect(state=>({per:state.personRe}),{
    addPer:createPersonAction
})(PersonUI)
